<template>
    <div class="meizi">
        <div class="sub-title">
            入库动态
            <span class="tips">(近7日)</span>
        </div>
        <div id="line-chart" ref="lineChartRef"></div>
    </div>
</template>

<script setup lang="ts">
    // import * as echarts from "echarts";
    import echarts from "@/echarts";
    import { onMounted, onUpdated, ref } from "vue";
    import { useResizeObserver } from "@/hooks/useResize";
    // import workBenchService from "@/service/workBench.service";
    // import dayjs from "dayjs";
    import { MediaType } from "@/type/workBench";
    const props = defineProps<{
        data: any;
    }>();

    let grid = {
        top: 40,
        bottom: 10,
        left: 10,
        right: 35,
        containLabel: true,
    };
    let xAxis: any = {
        type: "category",
        boundaryGap: false,
        data: [],
        axisLabel: {
            color: "#6F7885",
            fontSize: 12,
            margin: 16,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "solid",
                color: ["#DCE1FF"],
            },
        },
    };

    let serie: any = {
        data: [],
        type: "line",
        showSymbol: true,
        symbolSize: 8,
        smooth: true,
        lineStyle: {
            width: 3,
        },
        itemStyle: {
            color: "#2D51A0",
        },
        areaStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 1,
                    color: "rgba(255,255,255)",
                },
                {
                    offset: 0.7,
                    color: "rgba(202,218,255,0.4)",
                },
            ]),
        },
        emphasis: {
            areaStyle: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 1,
                        color: "rgba(255,255,255)",
                    },
                    {
                        offset: 0.7,
                        color: "rgba(202,218,255,0.4)",
                    },
                ]),
            },
        },
    };
    let yAxis: any = {
        type: "value",
        axisLine: {
            show: false,
        },
        axisLabel: {
            color: "#6F7885",
            fontSize: 12,
            margin: 16,
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: ["#DCE1FF"],
            },
        },
    };
    const option: any = {
        grid: [
            {
                show: false,
                ...grid,
                tooltip: {
                    show: true,
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "#5077C8",
                            width: 2,
                            dashOffset: 2,
                        },
                    },
                },
            },
            {
                ...grid,
                tooltip: {
                    show: true,
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(45,81,160,0.1)",
                        },
                    },
                },
            },
        ],
        tooltip: {
            show: true,
            backgroundColor: "rgba(202, 218, 255, 0.20)",
            padding: 8,
            borderWidth: 0,
            formatter: (args: any) => {
                let arr = args[0].data.mediaTypes as any[];
                let str = "";
                str += `${args[0].name} <br/>`;
                str +=
                    "<div style='background:#fff;padding:10px;border-radius:4px;display:flex;flex-direction:column'>";
                str += `<div style='font-weight:700;color:#303133;'><span style="display:inline-block;width:6em">总媒资数</span>${args[0].data.value}</div>`;
                arr.forEach((item) => {
                    str += `<div style="margin-top:5px"><span style="display:inline-block;width:6em">${
                        MediaType[item.mediaType]
                    }</span>${item.number}</div>`;
                });
                str += "</div>";
                return str;
            },
            textStyle: {
                fontSize: 12,
            },
        },
        xAxis: [
            {
                ...xAxis,
                gridIndex: 0,
            },
            {
                ...xAxis,
                gridIndex: 1,
            },
        ],
        yAxis: [
            {
                ...yAxis,
                gridIndex: 0,
            },
            {
                ...yAxis,
                gridIndex: 1,
            },
        ],

        series: [
            {
                ...serie,
                xAxisIndex: 0,
                yAxisIndex: 0,
            },
            {
                ...serie,
                xAxisIndex: 1,
                yAxisIndex: 1,
            },
        ],
    };
    const lineChartRef = ref();
    // onMounted(() => {
    //     init();
    // });

    onUpdated(() => {
        let data = props.data;
        if (!data) {
            return;
        }
        let x: string[] = [];
        let y: any[] = [];
        data.forEach((item: any) => {
            x.push(item.date);
            y.push({ value: item.value, mediaTypes: item.typeAndNumber });
        });
        if (Array.isArray(option.xAxis)) {
            if ("data" in option.xAxis[0]) {
                option.xAxis[0].data = x;
            }
            if ("data" in option.xAxis[1]) {
                option.xAxis[1].data = x;
            }
        }
        if (Array.isArray(option.series)) {
            option.series[0].data = y;
            option.series[1].data = y;
        }

        lineChart = echarts.init(lineChartRef.value, "myTheme");
        lineChart.setOption(option);
        lineChart.resize();
    });

    let lineChart: any;
    // const init = async () => {
    //     let endTime = dayjs().format("YYYY-MM-DD");
    //     let startTime = dayjs(endTime).subtract(6, "day").format("YYYY-MM-DD");
    //     let res = await workBenchService.mediaResourceData(startTime, endTime);
    //     let data = res.data.result.data || [];
    //     let x: string[] = [];
    //     let y: any[] = [];
    //     data.forEach((item) => {
    //         x.push(item.date);
    //         y.push({ value: item.value, mediaTypes: item.typeAndNumber });
    //     });
    //     if (Array.isArray(option.xAxis)) {
    //         if ("data" in option.xAxis[0]) {
    //             option.xAxis[0].data = x;
    //         }
    //         if ("data" in option.xAxis[1]) {
    //             option.xAxis[1].data = x;
    //         }
    //     }
    //     if (Array.isArray(option.series)) {
    //         option.series[0].data = y;
    //         option.series[1].data = y;
    //     }

    //     lineChart = echarts.init(lineChartRef.value, "myTheme");
    //     lineChart.setOption(option);
    // };
    const hdlResize = () => {
        lineChart && lineChart.resize();
    };
    // useResize(hdlResize);
    useResizeObserver(".page", hdlResize);

    defineExpose({
        lineChart,
    });
</script>

<style lang="scss" scoped src="./MeiziLineChart.scss"></style>
